<template>
    <div>
        <div class="top">
            可提现金额：<span>￥{{total.balanceAvailable}}</span> 元
        </div>
        <div class="input">
            <em>￥</em>
            <input v-model="money" type="decimal" placeholder="输入提现金额" placeholder-class="placeholder">
        </div>

        <div class="account">
            <div class="title flex">
                <p class="flex-1">提现账户</p>
                <span @click="$navigate.to('/pages/invitation/bankList')">编辑</span>
            </div>
            
            <picker mode="selector" :range="bankList" range-key="rangeKey" @change="pickChange">
                <div class="info">
                    <p>{{actBank.rangeKey}}</p>
                    <i class="fs24 icon-arrow-right"></i>
                </div>
            </picker>
        </div>

        <div class="submit" @click="submit">提交申请</div>
    </div>
</template>

<script>
import { getUserBanks, getUserInviteTotal, addCashTransfer } from '@/request/user'
export default {
    data() {
        return{
            total: {
                balanceAvailable: 0
            },
            actBankIndex: 0,
            bankList: [],
            money: ''
        }
    },
    computed: {
        actBank() {
            return this.bankList[this.actBankIndex] || {}
        }
    },
    onLoad() {
        this.getBankList()
        this.getTotal()
    },
    methods: {
        getBankList() {
            getUserBanks().then(res => {
                res.data.forEach(item => {
                    item.rangeKey = ['支付宝', '微信', '银行卡'][+item.accountType] + '-' + item.accountName + '-' + item.accountNumber
                })
                this.bankList = res.data
            })
        },
        pickChange(e) {
            this.actBankIndex = e.detail.value
        },
        getTotal() {
            getUserInviteTotal({
                needInviteCnt: '01'
            }).then(res => {
                this.total = res.data.account
            })
        },
        submit() {
            if(!this.actBank.id) return this.$interact.toast('请选择提现账户')
            if(!this.money) return this.$interact.toast('请输入提现金额')
            if( isNaN(Number(this.money)) ) return this.$interact.toast('请输入正确的提现金额')
            if( +this.money > +this.total.balanceAvailable) return this.$interact.toast('提现金额不能大于可提现金额')
            this.$interact.modal({
                title: '提示',
                content: '确定提现' + this.money + '元',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    addCashTransfer({
                        bankId: this.actBank.id,
                        money: this.money,
                    }).then(res => {
                        this.$interact.modal(res.msg).then(() => {
                            this.$navigate.back()
                        })
                    })
                }
            })
        }
    },

}
</script>

<style lang="less" scoped>
.top{
    width: 100%;
    padding: 50rpx 30rpx 10rpx;
    background: #fff;
    font-size: 32rpx;
    color: #666;
    span{
        color: #000;
        font-weight: bold;
        margin-right: 10rpx;
    }
}
.placeholder{
    font-weight: bold;
}
.input{
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    background: #fff;
    align-items: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #666;
    input{
        flex: 1;
        height: 200rpx;
        font-size: 56rpx;
        line-height: 200rpx;
        padding-left: 20rpx;
        color: #000;
    }
}

.account{
    width: 100%;
    margin-top: 30rpx;
    background: #fff;
    padding: 0 30rpx;
    .title{
        display: flex;
        align-items: center;
        width: 100%;
        height: 90rpx;
        span{
            font-size: 26rpx;
            color: rgb(2, 13, 135);
        }
    }
    .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        line-height: 90rpx;
        color: #ff6600;
    }
}

.submit{
    width: 690rpx;
    height: 90rpx;
    background: @mainColor;
    margin: 60rpx auto;
    .align(center);
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 10rpx;
}

</style>